<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { reactive, ref } from 'vue'

const baseURL = import.meta.env.VITE_BASE_URL

const banner = baseURL + '/uploads/联系我们.jpg'
const address = ref('杭州市钱塘区文海南路280号浙江经贸职业技术学院')
const phone = ref('13221811874')
const email = ref('tanyun@danayoung.com')
const form = reactive({
  name: '',
  email: '',
  content: ''
})
const formRef = ref()
const handleSubmit = async () => {
  console.log('clicked submit')
  if (form.name != '' && form.email != '' && form.content != '') {
    console.log(form)
    Message.success('已收到您的留言！')
    form.content = ''
    form.name = ''
    form.email = ''
  }
}
</script>

<template>
  <div class="h-75 w-full">
    <img class="w-full h-full object-cover" :src="banner" />
  </div>

  <div class="w-1280px mx-auto my-100px flex justify-between gap-50">
    <div class="flex flex-col">
      <div>
        <h3 class="mb-4 text-6xl">Contact us</h3>
        <p class="mb-12 text-6">联系我们</p>
      </div>

      <div>
        <div class="lh-loose text-4">
          <p>地址：{{ address }}</p>
          <p>电话：{{ phone }}</p>
          <p>邮箱：{{ email }}</p>
        </div>
        <p class="mt-24px">
          <img class="ml-13px" style="height: 100px; width: 100px" src="@/assets/img/ewm3.png" alt="" />
        </p>
        <p class="ml-13px text-4 text-gray-600 my-2">微信公众号</p>
        <p class="text-4 text-gray-600">扫一扫关注我们</p>
      </div>
    </div>
    <div class="w-full flex-1 mt-100px">
      <a-form ref="formRef" :model="form" @submit="handleSubmit">
        <div class="flex w-full gap-15 mb-4">
          <a-form-item hide-label class="flex-1" field="name" :rules="[{ required: true, message: '请输入 留言标题' }]">
            <a-input size="large" v-model="form.name" placeholder="留言标题" class="bg-white! border-gray-3!" />
          </a-form-item>
          <a-form-item hide-label class="flex-1" :rules="[{ required: true, message: '请输入联系邮箱' }]" field="email">
            <a-input size="large" class="bg-white! border-gray-3!" v-model="form.email" placeholder="联系邮箱" />
          </a-form-item>
        </div>
        <a-form-item hide-label :rules="[{ required: true, message: '请输入 留言内容' }]" field="content">
          <a-textarea
            class="w-full bg-white! h-200px border-gray-3!"
            v-model="form.content"
            placeholder="留言内容"
            allow-clear
          />
        </a-form-item>
        <a-form-item hide-label>
          <div class="flex justify-center w-full">
            <a-button html-type="submit" class="bg-black! w-100px! color-white!">提交</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 搜索框背景白色(你弄) */
// 悬浮
.acro-input-wrapper:hover {
  border-color: #ddd;
}
</style>
